<template>
    <div class="mvs-container">
       <div class="nav_box">
          <div class="nav_1">
              <p>地区:</p>
              <span :class="{active:area == '全部'}" @click="area = '全部'">全部</span>
              <span :class="{active:area == '内地'}" @click="area = '内地'">内地</span>
              <span :class="{active:area == '港台'}" @click="area = '港台'">港台</span>
              <span :class="{active:area == '欧美'}" @click="area = '欧美'">欧美</span>
              <span :class="{active:area == '日本'}" @click="area = '日本'">日本</span>
              <span :class="{active:area == '韩国'}" @click="area = '韩国'">韩国</span>
          </div>
          <div class="nav_2">
              <p>类型:</p>
              <span :class="{active:type == '全部'}" @click="type = '全部'">全部</span>
              <span :class="{active:type == '官方版'}" @click="type = '官方版'">官方版</span>
              <span :class="{active:type == '原声'}" @click="type = '原声'">原声</span>
              <span :class="{active:type == '现场版'}" @click="type = '现场版'">现场版</span>
              <span :class="{active:type == '网易出品'}" @click="type = '网易出品'">网易出品</span>
          </div>
          <div class="nav_3">
              <p>排序:</p>
              <span :class="{active:order == '上升最快'}" @click="order = '上升最快'">上升最快</span>
              <span :class="{active:order == '最热'}" @click="order = '最热'">最热</span>
              <span :class="{active:order == '最新'}" @click="order = '最新'">最新</span>
          </div>
       </div>
       <div class="mv">
         <div class="items" v-for="item in mvList" :key="item.id" @click="playMv(item.id)">
             <div class="item">
                <div class="item_img">
                   <img :src="item.cover" alt="">
                   <p class="img_num el-icon-caret-right"><span>{{item.playCount | formatCount}}</span></p>
                </div>
                <div class="item_text">{{item.name}}</div>
             </div>
         </div>                                 
       </div>
       <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
       background
      :current-page="page"
      :page-size="limit"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>          
    </div>
</template>

<script>
export default {
    data () {
        return {
           //地区
           area:'全部',
           //类型
           type:'全部',
           //排序
           order:'上升最快',
           //取出数量
           limit:8,
           //页码
           page:1,
           //总条数
           total:0,
           //mv数据
           mvList:[]
        }
    },
    watch:{
       area () {
           this.getMvList ()
           this.page = 1
       },
       type () {
           this.getMvList ()
           this.page = 1
       },
       order () {
           this.getMvList ()
           this.page = 1
       }
    },
    created () {
      this.getMvList()
    },
    methods:{
       async getMvList () {
          const res = await this.$http.get(' https://autumnfish.cn/mv/all',
          {
            params:{area:this.area,type:this.type,order:this.order,limit:this.limit,offset:(this.page-1)*this.limit}
          })
          if(res.data.code == 200){
             this.mvList = res.data.data
             //接口问题
             if(res.data.count){
                this.total = res.data.count
             }
             console.log(this.mvList)
          }
        },
        //当前页发生改变触发
        handleCurrentChange (newPage) {
             this.page = newPage
             this.getMvList()
        },
        playMv (id) {
           this.$router.push(`/mv?id=${id}`)
        }
    }
}
</script>

<style lang="less" scoped>
    .mvs-container{
        .nav_box{
            font-size: 14px;
            .nav_1{
                display: flex;
                p{
                   margin-top: 20px;
                }
                span{
                      margin: 15px 20px;
                      padding: 5px 20px;
                      color: gray;
                      cursor: pointer;
                }
            }
            .nav_2{
                display: flex;
                p{
                   margin-top: 20px;
                }
                span{
                    padding: 5px 20px;
                    margin: 15px 20px;
                     color: gray;
                     cursor: pointer;
                }
            }
            .nav_3{
                display: flex;
                p{
                   margin-top: 20px;
                }
                span{
                    padding: 5px 20px;
                    margin: 15px 20px;
                     color: gray;
                     cursor: pointer;
                }
            }
        }
    }
    .mv{
         display: flex;
         flex-wrap: wrap;
      .items{
            width: 250px;
            cursor: pointer;
            margin-right: 25px;
            margin-bottom: 30px;
        .item{
            width: 100%;
            .item_img{
                position: relative;
                width: 100%;
                img{
                    width: 100%;
                }
                p{
                    position: absolute;
                    right: 5px;
                    top: 0;
                    color: white;
                    font-size: 25px;
                    display: flex;
                    align-items: center;
                    span{
                        font-size: 16px;
                    }
                }
            }
            .item_text{}
        }  
      }  
    }
    .active{
            color: #dd6d60;
            background-color: #fcf6f5;
            border-radius: 20px;
      }
</style>